<template>
    <div>
        <div class="seach">
            <span>
                {{$t('oprnam')}}
                <el-input v-model.trim="operName" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <el-button type="primary" @click="getOper" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" class="heginer" @click="showAddOper" size="mini" v-preventReClick>{{$t('addadm')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="operTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="username" :label="$t('oprnam')">
                </el-table-column>
                <el-table-column prop="roleNames" :label="$t('rolenam')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="220">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditOper(scope.row.sysUid)" v-if="scope.row.status === $t('vlid')">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" @click="showloseEfficacy (scope.row.sysUid)" v-if="scope.row.status === $t('vlid')">{{$t('invlid')}}</el-link>
                        <el-link type="primary" @click="showPower(scope.row.roleId)">{{$t('permquy')}}</el-link>
                        <el-link type="primary" @click="showReset(scope.row.sysUid)">{{$t('restpwd')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="user.pagenum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="user.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
        <!-- 添加弹框 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addOperForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="addOperForm" :rules="addOperRul" :model="addOperForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('uname')" prop="username">
                    <el-input v-model.trim="addOperForm.username" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('pwd')" prop="password">
                    <el-input v-model.trim="addOperForm.password" show-password :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rolenam')" prop="roleId">
                    <el-select v-model="addOperForm.roleId" :placeholder="$t('plsset')" class="sellong">
                        <el-option v-for="item in roleTab" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('nams')" prop="name">
                    <el-input v-model.trim="addOperForm.name" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('eml')" prop="email">
                    <el-input v-model.trim="addOperForm.email" type="email" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('phnnum')" prop="mobile">
                    <el-input v-model.trim="addOperForm.mobile" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addOper(addOperForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editOperFormA)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="editOperFormA" :rules="editOperRul" :model="editOperFormA" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('uname')" prop="username" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editOperFormA.username"></el-input>
                </el-form-item>
                <!-- <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editOperFormA.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('eml')" prop="email" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editOperFormA.email"></el-input>
                </el-form-item>
                <el-form-item :label="$t('phnnum')" prop="mobile" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editOperFormA.mobile"></el-input>
                </el-form-item>
                <el-form-item :label="$t('nams')" prop="name" :placeholder="$t('plsipt')">
                    <el-input v-model.trim="editOperFormA.name"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rolenam')" prop="roleId">
                    <el-select v-model="editOperFormA.roleId" :placeholder="$t('plsset')" @change="handleroles" class="sellong">
                        <el-option v-for="(item, idx) in roleTab" :key="idx" :label="item.roleName" :value="item.roleId"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editOper(editOperFormA)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 权限框 -->
        <el-dialog :title="$t('viewpers')" :visible.sync="powerDialogVisible" width="30%" @close="powerDialogVisibleClosed()" :modal-append-to-body="false">
            <el-tree :data="powerForm" show-checkbox node-key="funcId" default-expand-all :default-checked-keys="selForm"></el-tree>
        </el-dialog>
        <!-- 重置密码 -->
        <el-dialog :title="$t('restpass')" :visible.sync="resetDialogVisible" width="30%" :modal-append-to-body="false">
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="resetPwd" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="resetDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog :title="$t('invlid')" :visible.sync="delDialogVisible" width="30%" :modal-append-to-body="false">
            {{$t('whetoinvtheuser')}}
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="loseEfficacy" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="delDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    rolelist,
    operlist,
    operadd,
    opereditdet,
    operedit,
    oprpowertree,
    resetpassword
} from '@/libs/reqlist.js'
export default {
    data () {
        var isNumberVlidator = (rule, value, callback) => {
            var pattern = /^([0-9]{1,11})?$/
            if (!pattern.test(value)) {
                return callback(new Error(this.$t('plsent8cellphnnum')))
            } else {
                callback()
            }
        }
        return {
            isOk: false,
            resetDialogVisible: false,
            editpwdDialogVisible: false,
            total: 0,
            // 操作员名
            operName: '',
            roleTab: [],
            // 数据表
            operTab: [],
            role: {
                roleName: '',
                pageNum: 1,
                pageSize: 10
            },
            user: {
                email: '',
                mobile: '',
                name: '',
                orderParamIdx: 0,
                orderType: 0,
                pageNum: 1,
                pageSize: 10,
                username: ''
            },
            addOperForm: {
                email: '',
                mobile: '',
                name: '',
                roleId: '',
                status: 'VALID',
                username: '',
                password: ''
            },
            addOperRul: {
                email: [
                    { required: true, message: this.$t('maicatbeemt'), trigger: 'blur' },
                    { type: 'email', message: this.$t('plsentcorr'), trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: this.$t('mobnumcatemt'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                name: [
                    { required: true, message: this.$t('namecatbemt'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('pwdcatbemt'), trigger: 'blur' }
                ],
                username: [
                    { required: true, message: this.$t('usrnamcanbemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('plssltsta'), trigger: 'blur' }
                ]
            },
            addDialogVisible: false,
            editDialogVisible: false,
            editOperFormA: {},
            editOperFormB: {
                username: null,
                password: null,
                name: null,
                mobile: null,
                email: null,
                status: null,
                roleId: null,
                sysUid: null
            },
            editOperRul: {
                email: [
                    { required: true, message: this.$t('maicatbeemt'), trigger: 'blur' },
                    { type: 'email', message: this.$t('plsentcorr'), trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: this.$t('mobnumcatemt'), trigger: 'blur' },
                    { validator: isNumberVlidator, trigger: 'blur' }
                ],
                name: [
                    { required: true, message: this.$t('namecatbemt'), trigger: 'blur' }
                ],
                password: [
                    { required: true, message: this.$t('pwdcatbemt'), trigger: 'blur' }
                ],
                username: [
                    { required: true, message: this.$t('usrnamcanbemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('plssltsta'), trigger: 'blur' }
                ]
            },
            powerDialogVisible: false,
            powerForm: [],
            defKeys: [],
            selForm: [],
            resetForm: {
                sysUid: null,
                password: null
            },
            resetPwdRul: {
                password: [
                    { required: true, message: this.$t('pwdcanbemt'), trigger: 'blur' }
                ]
            },
            delDialogVisible: false
        }
    },
    methods: {
        getRoleList () {
            rolelist(JSON.stringify(this.role)).then(res => {
                if (res.data.code === '000000') {
                    this.roleTab = res.data.data.list.filter(item => {
                        return item.status === 'VALID'
                    })
                }
            })
        },
        getOper () {
            this.user.pageNum = 1
            this.seachOper()
        },
        // 查询操作员
        seachOper () {
            this.user.username = this.operName.trim()
            // let operNom = this.operName.trim()
            operlist(this.user).then(res => {
                if (res.status === 200) {
                    this.operTab = res.data.list
                    this.operTab.forEach(item => {
                        if (item.status === 'VALID') item.status = this.$t('vlid')
                        if (item.status === 'INVALID') item.status = this.$t('invlid')
                        // item.sysGmtCreate = item.sysGmtCreate.substring(0, 10)
                        // item.sysGmtModified = item.sysGmtModified.substring(0, 10)
                    })
                    this.total = res.data.total - 0
                }
            })
        },
        showEditPwd () {
            this.editpwdDialogVisible = true
        },
        handleSizeChange (newSize) {
            this.user.pageSize = newSize
            this.seachOper()
        },
        handleCurrentChange (newNum) {
            this.user.pageNum = newNum
            window.localStorage.setItem('curpage', newNum)
            this.seachOper()
        },
        // 展示添加框
        showAddOper () {
            this.addDialogVisible = true
            this.getRoleList()
        },
        addDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        addOper (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                await operadd(JSON.stringify(this.addOperForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('opraddsuc'),
                            type: 'success'
                        })
                        this.seachOper()
                        this.addDialogVisible = false
                    }
                })
            })
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        showEditOper (id) {
            this.editDialogVisible = true
            this.getRoleList()
            opereditdet(JSON.stringify(id)).then(res => {
                if (res.data.code === '991004') {
                    this.editDialogVisible = false
                    this.$message.error(this.$t('inspertomod'))
                    return false
                }
                let idx = res.data.data.userRoleList.findIndex(item => {
                    return item.flag === true
                })
                this.editOperFormA = res.data.data
                this.editOperFormA.roleId = res.data.data.userRoleList[idx].roleId
            })
        },
        handleroles () {
            this.$forceUpdate()
        },
        editOper (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                this.editOperFormB.username = this.editOperFormA.username
                this.editOperFormB.mobile = this.editOperFormA.mobile
                this.editOperFormB.email = this.editOperFormA.email
                this.editOperFormB.status = this.editOperFormA.status
                this.editOperFormB.roleId = this.editOperFormA.roleId
                this.editOperFormB.sysUid = this.editOperFormA.sysUid
                this.editOperFormB.name = this.editOperFormA.name
                await operedit(JSON.stringify(this.editOperFormB)).then(res => {
                    if (res.status === 200) {
                        this.$message({
                            message: this.$t('oprmodsuc'),
                            type: 'success'
                        })
                        this.seachOper()
                        this.editDialogVisible = false
                    }
                })
            })
        },
        async showloseEfficacy (id) {
            await opereditdet(JSON.stringify(id)).then(res => {
                if (res.data.code === '991004') {
                    this.editDialogVisible = false
                    this.$message.error(this.$t('inspertomod'))
                    return false
                }
                let idx = res.data.data.userRoleList.findIndex(item => {
                    return item.flag === true
                })
                this.editOperFormA = res.data.data
                this.editOperFormA.roleId = res.data.data.userRoleList[idx].roleId
                this.delDialogVisible = true
            })
        },
        async loseEfficacy () {
            this.editOperFormB.username = this.editOperFormA.username
            this.editOperFormB.mobile = this.editOperFormA.mobile
            this.editOperFormB.email = this.editOperFormA.email
            this.editOperFormB.status = 'INVALID'
            this.editOperFormB.roleId = this.editOperFormA.roleId
            this.editOperFormB.sysUid = this.editOperFormA.sysUid
            this.editOperFormB.name = this.editOperFormA.name
            await operedit(JSON.stringify(this.editOperFormB)).then(res => {
                if (res.status === 200) {
                    this.$message({
                        message: this.$t('oprmodsuc'),
                        type: 'success'
                    })
                    this.seachOper()
                    this.delDialogVisible = false
                }
            })
        },
        showPower (id) {
            oprpowertree(id, JSON.stringify(id)).then(res => {
                if (res.data.code === '999902') {
                    this.$message.error(this.$t('plsaddroleacc'))
                    return false
                }
                this.powerDialogVisible = true
                res.data.data.forEach(item => {
                    item.label = item.funcName
                    item.children.forEach(item => {
                        item.label = item.funcName
                        item.children.forEach(item => {
                            item.label = item.funcName
                        })
                    })
                    this.getLeafKeys(item, this.defKeys)
                })
                this.powerForm = res.data.data
                this.defKeys.forEach(item => {
                    if (item.flag === true) {
                        this.selForm.push(item.selId)
                    }
                })
            })
        },
        showReset (id) {
            this.resetForm.sysUid = id
            this.resetDialogVisible = true
        },
        resetPwd () {
            this.resetForm.password = '123456'
            resetpassword(JSON.stringify(this.resetForm)).then(res => {
                if (res.status === 200) {
                    this.$message({
                        message: this.$t('pwdressuc'),
                        type: 'success'
                    })
                    this.seachOper()
                    this.resetDialogVisible = false
                }
            })
        },
        getLeafKeys(node, arr) {
            // 如果当前节点不包括children属性,就是三级节点
            if (node.children.length === 0) {
                return arr.push({ selId: node.funcId, flag: node.flag })
            }
            // 到这里就表示不是三级路由,循环下面的children
            node.children.forEach(item => this.getLeafKeys(item, arr))
        },
        powerDialogVisibleClosed () {
            this.defKeys = []
            this.selForm = []
        }
    },
    mounted () {
        if (window.localStorage.getItem('curpage')) this.role.pageNum = window.localStorage.getItem('curpage') - 0
        this.seachOper()
    },
    destroyed () {
        if (window.localStorage.getItem('curpage')) window.localStorage.removeItem('curpage')
    }
}
</script>

<style lang="less" scoped>
@import './oprMgr.less';
</style>
